<template>
  <div id="firstBody">
    <el-container>
      <el-header style="height: 100%;">
        <el-carousel :interval="4000" type="card" height="200px" >
            <el-carousel-item v-for="(item,index) in itemList" :key="index">
              <el-image class="medium" style="width: 622px; height: 200px" :src="item.idView" :fit="fit"></el-image>
               <div style="position:absolute;width:50px;height:50px;z-indent:2;left:0;top:0;">
               <h3>{{item.name}}</h3>
              </div>
            </el-carousel-item>
          </el-carousel>
          <el-row :gutter="21" width="100%" style="margin-left:0px ;" v-for="(e,index) in elist" :key="index" >
            <el-col :span="17">
              <table class="t1" border="2px">
                <th  class="tr1">
                  <span >{{e.title}}</span>
                  <el-link  style="float: right;margin-right: 10px;" @click="goList(e.id)">更多>></el-link>
                </th>
                <tr>
                 <el-row :gutter="30" style="margin-left:0px;margin-right: 0px;">
                   <el-col :span="6" v-for="(o, index) in 8" :key="o" :offset="index > 0 ? 2 : 0">
                       <el-card :body-style="{ padding: '0px' }">
                         <el-link :underline="false"><img :src="e.imgsrc" class="image" @click="goPlay"></el-link>
                         <div style="padding: 10px;">
                           <el-link :underline="false"><span @click="goPlay">{{e.text}}</span></el-link>
                           <div class="bottom clearfix">
                             <time class="time">{{ e.currentDate }}</time>
                           </div>
                         </div>
                       </el-card>
                     </el-col>
                 </el-row>
                </tr>
              </table>

            </el-col>
            <el-col :span="4">
              <table class="t2" border="2px">
                <th  class="tr2">
                  <span >排行榜</span>
                  <el-link href="https://element.eleme.io" target="_blank" style="float: right;margin-right: 10px;">更多>></el-link>
                </th>
                <tr style="border-bottom: 2px solid #D3DCE6;" v-for="(pai,index) in plist" :key="index">
                  {{pai.text}}
                </tr>
              </table>

            </el-col>
          </el-row>

      </el-header>

    </el-container>
  </div>
</template>

<style>
  .el-row {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }

    }
    .el-col {
      border-radius: 4px;
      padding: 0;
      margin-left: 0;
      margin-top: 5px;
      margin-bottom: 5px;
    }


    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
      }

      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }

      .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
      }

      .time {
          font-size: 13px;
          color: #999;
        }

        .bottom {
          margin-top: 13px;
          line-height: 12px;
        }

        .button {
          padding: 0;
          float: right;
        }


        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

         table{
         border-collapse:collapse;
         border-spacing:0;
         }

         th,td{
         padding:0;
         }


        .t1{
          border-color: #D3DCE6;
          width: 100%;
        }
        .tr1{
          height: 30px;
          width: 100%;
          background-color: #99A9BF;
          border-color: #D3DCE6;
        }
        .t2{
          border-color: #D3DCE6;
          width: 100%;
        }
        .tr2{
          height: 30px;
          width: 100%;
          background-color: #99A9BF;
          border-color: #D3DCE6;
        }
        .tr3{
           border-color: #D3DCE6;
        }
</style>
<script>
export default {
   data() {
        return {
          fit: 'fill',
          itemList : [
            {id: 0, name:'推荐', idView: require('../movie/img/12.jpg')},
            {id: 1, name:'推荐', idView: require('../movie/img/12.jpg')},
            {id: 2, name:'推荐', idView: require('../movie/img/12.jpg')}
          ],
          elist: [
            {id:0,title:'电影列表', text:'复仇者联盟',currentDate: new Date(),imgsrc:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'},
            {id:1,title:'电视剧列表', text:'复仇者联盟',currentDate: new Date(),imgsrc:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'},
            {id:2,title:'动漫列表', text:'复仇者联盟',currentDate: new Date(),imgsrc:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'}

          ],
          plist: [
                {id: 0, text: '学习 JavaScript' },
                {id: 1, text: '学习 Vue' },
                {id: 2, text: '整个牛项目' }
              ],
        }
      },
  methods:{
    goPlay() {
      this.$router.push({
        path: '/vedioPlay'
      });
    },
    goList(a) {
      if(a==0){
        this.$router.push({
          path: '/movieBody'
        });
      }else if(a==1){
        this.$router.push({
          path: '/tvBody'
        });
      }else{
        this.$router.push({
          path: '/animeBody'
        });
      }
    }
  }
}
</script>
